<template>
    <div id="over-cal-config-list">
        <!-- 表格工具栏 -->
        <div class="table-toolbar">
            <el-form label-width="150px" :model="searchParams">
                <div class="flex-box">
                    <el-form-item label="计算因子编号/名称:">
                        <el-select v-model="searchParams.enFacCode" placeholder="请输入" size="mini" filterable clearable>
                            <el-option
                                v-for="item in calcFactorList"
                                :key="item.entryCalculateFactorCode"
                                :label="item.entryCalculateFactorCode + ' ' + item.entryCalculateFactorName"
                                :value="item.entryCalculateFactorCode"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label-width="0" style="text-align: left; margin-left: 20px">
                        <el-button size="mini" type="primary" @click="handleBtnClick('search')">查询</el-button>
                        <el-button size="mini" type="primary" @click="handleBtnClick('add')">新增</el-button>
                        <el-button size="mini" type="primary" @click="layoutDialog = true">布局设置</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <!--表格  -->
        <RiskTableP
            ref="risk-table"
            :tableConfig="tableConfig"
            :tableData="tableData"
            :column="showColumns"
            :paging="paging"
            :searchParams="searchParams"
            v-loading="tableLoading"
            @page-change="getTableData"
            :key="tableKey"
            style="height: calc(100% - 70px)"
            minWidth="100px"
            :span-method="rowspanMethod"
        >
            <template #operation="{ row }">
                <RiskIconButton type="primary" icon="el-icon-view" topTitle="查看" @on-click="handleBtn('look', row)"></RiskIconButton>
                <RiskIconButton type="primary" icon="el-icon-edit" topTitle="编辑" @on-click="handleBtn('edit', row)"></RiskIconButton>
                <RiskIconButton type="danger" icon="el-icon-delete" topTitle="删除" @on-click="handleBtn('delete', row)"></RiskIconButton>
            </template>
        </RiskTableP>

        <!-- 布局设置 -->
        <RiskTableLayout
            ref="risk-table-layout"
            :tableName="'OVER_CALC_CONFIG_LIST_TEST'"
            :visible.sync="layoutDialog"
            :column="columns"
            :fixedColumns="fixedColumns"
        />

        <!-- 删除 -->
        <el-dialog
            title="确定删除该超限归因配置表吗？"
            :visible.sync="deleteVisible"
            width="30%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <div>因子编号：{{ currentRow.enFacCode }}</div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogBtn('cancel')">取 消</el-button>
                <el-button type="primary" @click="deleteDialogBtn('confirm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import RiskIconButton from '@/common/components/risk-icon-button.vue';
import RiskTableLayout from '@/common/components/risk-table-layout-plus.vue';
import RiskTableP from '@/common/components/risk-table-plus.vue';
import { ColumnVO, PageVO, TableConfigVO, VueObject } from '@/common/vo';
import DictionConstUtil from '@/utils/diction-const-util';
import { Component, Vue } from 'vue-property-decorator';

@Component({ name: 'OverCalcConfigList', components: { RiskTableP, RiskIconButton, RiskTableLayout } })
export default class OverCalcConfigList extends Vue {
    searchParams: any = {
        enFacCode: '',
    };

    paging: PageVO = { currentPage: 1, pageSize: 25, total: 0 };
    tableLoading: boolean = false;
    tableConfig: TableConfigVO = {
        rowKey: 'configId', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    tableData: any[] = [];
    columns: ColumnVO[] = [
        { field: 'enFacCode', title: '因子编号' },
        { field: 'enCalFacName', title: '因子名称', minWidth: '150px' },
        { field: 'valTypeDescribe', title: '估值方式' },
        { field: 'tradeSettleModeDescribe', title: '结算模式' },
        { field: 'isVouchDescribe', title: '是否通过凭证分析', minWidth: '140px' },
        { field: 'matchVouchSubNoDescribe', title: '凭证科目' },
        { field: 'vouRemarkDescribe', title: '摘要配置' },
        { field: 'causeTagDescribe', title: '归因标识' },
        { field: 'isTrackDescribe', title: '是否追溯明细', minWidth: '130px' },
        { field: 'trackDay', title: '追溯天数' },
        { field: 'comment', title: '配置说明' },
        { field: 'enFacSubName', title: '因子颗粒度拆解', minWidth: '140px' },
        { title: '操作', field: 'operation', minWidth: 150, align: 'center', fixed: 'right' },
    ];

    fixedColumns: ColumnVO[] = [
        { field: 'enFacCode', title: '因子编号' },
        { title: '操作', field: 'operation', minWidth: 150, align: 'center', fixed: 'right' },
    ];
    tableKey: number = 0;
    layoutDialog: boolean = false;
    showColumns: ColumnVO[] = [];
    currentRow: any = {};
    deleteVisible: boolean = false;
    private calcFactorList: any = [];
    async mounted() {
        // 监听布局设置
        this.$watch(
            () => {
                return (this.$refs['risk-table-layout'] as VueObject).showColumns;
            },
            val => {
                this.showColumns = val && val.length ? val : this.columns;
                this.tableKey++;
            }
        );
        this.getTableData();
        this.calcFactorList = await DictionConstUtil.FNCalculateFactor();
    }

    getTableData(): void {
        this.tableLoading = true;
        this.$axios
            .post('/ovattr/conf/query', { ...this.searchParams, paging: this.paging })
            .then((res: any) => {
                this.tableData = res.list || [];
                this.paging.total = res.total;
            })
            .catch(() => {
                let res: any = {
                    list: [
                        {
                            causeTag: '2',
                            causeTagDescribe: '主动',
                            comment: 'comment1',
                            configId: 909226386615595008,
                            enCalFacName: '证券持仓市值01',
                            enFacCode: 'YH001',
                            enFacSubCode: 'YH001_01',
                            fuMatchVouchSubNo: '1',
                            isTrack: '1',
                            isTrackDescribe: '是',
                            isVouch: '1',
                            isVouchDescribe: '是',
                            matchVouchSubNoDescribe: '1',
                            matchVouchSubNoList: ['1'],
                            tckFuMatchVouSubNo1Two: '1',
                            tckFuMatchVouSubNo2Two: '1',
                            tckFuMatchVouSubNoOne: '1',
                            tckMatchVouSubNo1TwoList: ['1'],
                            tckMatchVouSubNo2TwoList: ['1'],
                            tckMatchVouSubNoOneList: ['1'],
                            tckVouRemarkContain1TwoList: ['1'],
                            tckVouRemarkContain2TwoList: ['1'],
                            tckVouRemarkContainOneList: ['1'],
                            trackDay: 1,
                            tradeSettleMode: '1',
                            tradeSettleModeDescribe: '托管行结算',
                            twoTrack: '1',
                            valType: '1',
                            valTypeDescribe: '市值法',
                            vouRemarkContainList: ['1'],
                            vouRemarkDescribe: '等于1、不等于1、包含1、不包含1',
                            // vouRemarkEqualList: ['1'],
                            // vouRemarkNocontainList: ['1'],
                            // vouRemarkNoequalList: ['1'],
                        },
                        {
                            causeTag: '1',
                            causeTagDescribe: '主动',
                            comment: 'comment1',
                            configId: 19226386615595009,
                            enCalFacName: '证券持仓市值01',
                            enFacCode: 'YH001',
                            enFacSubCode: 'YH001_01',
                            fuMatchVouchSubNo: '1',
                            isTrack: '1',
                            isTrackDescribe: '是',
                            isVouch: '1',
                            isVouchDescribe: '是',
                            matchVouchSubNoDescribe: '1',
                            matchVouchSubNoList: ['1'],
                            tckFuMatchVouSubNo1Two: '1',
                            tckFuMatchVouSubNo2Two: '1',
                            tckFuMatchVouSubNoOne: '1',
                            tckMatchVouSubNo1TwoList: ['1'],
                            tckMatchVouSubNo2TwoList: ['1'],
                            tckMatchVouSubNoOneList: ['1'],
                            tckVouRemarkContain1TwoList: ['1'],
                            tckVouRemarkContain2TwoList: ['1'],
                            tckVouRemarkContainOneList: ['1'],
                            trackDay: 1,
                            tradeSettleMode: '1',
                            tradeSettleModeDescribe: '托管行结算',
                            twoTrack: '1',
                            valType: '1',
                            valTypeDescribe: '市值法',
                            vouRemarkContainList: ['1'],
                            vouRemarkDescribe: '等于1、不等于1、包含1、不包含1',
                            vouRemarkEqualList: ['1'],
                            vouRemarkNocontainList: ['1'],
                            vouRemarkNoequalList: ['1'],
                        },
                        {
                            causeTag: '1',
                            causeTagDescribe: '主动',
                            comment: 'comment2',
                            configId: 909641353059790848,
                            enCalFacName: '证券持仓市值',
                            enFacCode: 'YH001',
                            enFacSubCode: 'YH001_01',
                            enFacSubName: '证券持仓市值01',
                            fuMatchVouchSubNo: '1',
                            isTrack: '1',
                            isTrackDescribe: '是',
                            isVouch: '1',
                            isVouchDescribe: '是',
                            matchVouchSubNoDescribe: '1',
                            matchVouchSubNoList: ['1'],
                            tckFuMatchVouSubNo1Two: '1',
                            tckFuMatchVouSubNo2Two: '1',
                            tckFuMatchVouSubNoOne: '1',
                            tckMatchVouSubNo1TwoList: ['1'],
                            tckMatchVouSubNo2TwoList: ['1'],
                            tckMatchVouSubNoOneList: ['1'],
                            tckVouRemarkContain1TwoList: ['1'],
                            tckVouRemarkContain2TwoList: ['1'],
                            tckVouRemarkContainOneList: ['1'],
                            trackDay: 1,
                            tradeSettleMode: '1',
                            tradeSettleModeDescribe: '托管行结算',
                            twoTrack: '1',
                            valType: '1',
                            valTypeDescribe: '市值法',
                            vouRemarkContainList: ['3'],
                            vouRemarkDescribe: '等于摘要1、不等于摘要2、包含摘要3、不包含摘要4',
                            vouRemarkEqualList: ['1'],
                            vouRemarkNocontainList: ['4'],
                            vouRemarkNoequalList: ['2'],
                        },
                    ],
                    total: 1,
                    totalPage: 0,
                };

                this.tableData = res.list || [];
                this.paging.total = res.total;
            })
            .finally(() => {
                this.tableLoading = false;
            });
    }

    handleBtnClick(operation): void {
        if (operation === 'search') {
            this.getTableData();
        } else if (operation === 'add') {
            this.currentRow = { operateType: operation };
            this.$emit('handleRowConfig', this.currentRow);
        }
    }

    /**
     * 按钮点击事件
     */
    handleBtn(type: string, row): void {
        this.currentRow = JSON.parse(JSON.stringify(row));
        this.currentRow.operateType = type;
        if (type === 'look' || type === 'edit') {
            this.$emit('handleRowConfig', this.currentRow);
        } else if (type === 'delete') {
            // this.checkRowKeys = [row.id];
            // this.checkedRows = [{ id: row.id, dataSourceName: row.dataSourceName }];
            this.deleteVisible = true;
        }
    }

    /**
     * 删除弹框按钮处理 type:cancel|confirm
     */
    deleteDialogBtn(type: string) {
        if (type == 'cancel') {
            this.deleteVisible = false;
        } else if (type == 'confirm') {
            this.$axios
                .post('/ovattr/conf/delete/' + this.currentRow.configId)
                .then((res: any) => {
                    this.yh_message_success('删除成功！');
                    this.paging.currentPage = 1;
                    this.getTableData();
                })
                .finally(() => {
                    this.deleteVisible = false;
                });
        }
    }

    // 通用行合并函数（将相同多列数据合并为一行）
    rowspanMethod({ row, _rowIndex, column, visibleData }) {
        const fields = ['enFacCode'];
        let field = column.property;
        if (['enCalFacName'].includes(field)) {
            field = 'enFacCode';
        }
        const cellValue = row[field];
        if (cellValue && fields.includes(field)) {
            const prevRow = visibleData[_rowIndex - 1];
            let nextRow = visibleData[_rowIndex + 1];
            if (prevRow && prevRow[field] === cellValue) {
                return { rowspan: 0, colspan: 0 };
            } else {
                let countRowspan = 1;
                while (nextRow && nextRow[field] === cellValue) {
                    nextRow = visibleData[++countRowspan + _rowIndex];
                }
                if (countRowspan > 1) {
                    return { rowspan: countRowspan, colspan: 1 };
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
#over-cal-config-list {
    height: calc(100vh - 50px);
    padding: 0 10px;

    .yh-question {
        font-weight: bold;
        padding: 0 5px;
    }

    .my-input {
        margin: 10px;
        width: 150px;
    }
}

/*** required 红点 ***/
/deep/ .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
    content: '*' !important;
    margin-right: 2px !important;
    color: red;
}

/deep/ .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:after {
    display: none;
}
.flex-box {
    display: flex;
    flex-wrap: wrap;
    .width-30 {
        width: 50%;
    }
    .width-50 {
        width: 50%;
    }
    /deep/ .el-form-item {
        margin-bottom: 10px;
        .el-form-item__label {
            color: #575757;
        }
    }
}

/*** required 红点 ***/
</style>
<style>
.custom-span {
    background-color: #fff !important;
}
</style>
